﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YourHealth.aspx.cs" Inherits="GreenyMeter.YourHealth"
    MasterPageFile="~/Site.master" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/justgage.1.0.1.js" type="text/javascript"></script>
    <script src="Scripts/justgage.1.0.1.min.js" type="text/javascript"></script>
    <script src="Scripts/raphael.2.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        window.onload = function GoMeter() {

            $("#menuYourHealth").show();
            $("#menuYourPlanet").hide(0);
            $("#divDetails").hide(0);

            $("#g1").click(function (event) {

                event.preventDefault();
               
                //$(".faq").slideToggle();

            });

            var g1, g2, g3, rand1, rand2;
           
            var g1 = new JustGage({
                id: "g1",
                value: getRandomInt(parseInt('<%= Session["p1"] %>'), parseInt('<%= Session["p2"] %>')),
                min: 0,
                max: 100,
                title: "Tu salud",
                label: "Promedio!",
                gaugeWidthScale: 1.2,
                levelColors: [
                                  "#FF0E0E",
                                  "#FCF700",
                                  "#339900"
                                  ]
            });
            var g2 = new JustGage({
                id: "g2",
                value: getRandomInt(0, 100),
                min: 0,
                max: 100,
                title: "Tu planeta",
                label: "Regular! :(",
                gaugeWidthScale: 1.2,
                levelColors: [
          "#FF0E0E",
          "#FCF700",
          "#339900"
        ]
            });
            var g3 = new JustGage({
                id: "g3",
                value: getRandomInt(0, 100),
                min: 0,
                max: 100,
                title: "Tu comunidad",
                label: "Bien! :)",
                gaugeWidthScale: 1.2,
                levelColors: [
          "#FF0E0E",
          "#FCF700",
          "#339900"
        ]
            });

            setInterval(function () {

                g1.refresh(getRandomInt(parseInt('<%= Session["p1"] %>'), parseInt('<%= Session["p2"] %>')));
                g2.refresh(getRandomInt(0, 100));
                g3.refresh(getRandomInt(0, 100));

            }, 2500);
        };

         
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div class="row">
        <div class="span12">
            <!-- FAQ starts -->
            <div class="faq">
                <div class="row">
                    <div class="span12">
                        <!-- FAQ hero -->
                        <%-- <div class="cta">
                            <div class="hero">
                                <!-- Title. Don't forget the <span> tag -->
                                <h3>
                                    <span>test</span></h3>
                                <!-- para -->
                                <p>
                                    GreenyMeter es una aplicacion que te permite saber que tan "Verde" es lo que estas
                                    consumiendo.</p>
                            </div>
                        </div>--%>
                        <!-- FAQ -->
                        <asp:UpdatePanel ID="UpdatePanelFoodTypes" runat="server" EnableViewState="true">
                            <ContentTemplate>
                                <asp:Panel ID="PanelFoodTypes" runat="server">
                                    <div class="accordion" id="accordion2">
                                        <!-- Each item should be enclosed inside the class "accordion-group". Note down the below markup. -->
                                        <!-- First Accordion -->
                                        <div class="accordion-group">
                                            <div class="accordion-heading">
                                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                                    <!-- Title. Don't forget the <i> tag. -->
                                                    <h5>
                                                        <i class="icon-plus"></i>
                                                        <asp:Label ID="LabelStepsHeaderText" runat="server" Text="1. Indicanos el tipo de busqueda."></asp:Label></h5>
                                                </a>
                                            </div>
                                            <div id="collapseOne" class="accordion-body collapse in">
                                                <div class="accordion-inner">
                                                    <!-- Para -->
                                                    <p>
                                                        <a style="color:Red">1. Para efectos de este demo por favor buscar por la categoría de alimento/Harinas/Pan Blanco. La información de la base de datos es de prueba, todavía no tienen concordancia los tipos de alimentos con los Ingredientes. Estamos trabajando en ello.</a><br />
                                                        <a style="color:Red">2. Recordar seleccionar los ingredientes y dar click en calcular en el botón de abajo. Una vez se efectúe el calculo se llenará la gráfica del círculo Tu salud. </a><br />
                                                        <a style="color:Red">3. Hacer click en el círculo Tu salud. </a><br />
                                                        
                                                        <asp:Label ID="LabelStepDescriptionText" runat="server" Text="Puede ser un producto, un alimento o puedes intentar buscar por la marca del producto."></asp:Label></p>
                                                    <asp:DropDownList ID="DropDownListSearchType1" runat="server" TabIndex="-1" CssClass="controls"
                                                        data-placeholder="Nivel" AutoPostBack="true" OnSelectedIndexChanged="DropDownListSearchType1_SelectedIndexChanged">
                                                        <asp:ListItem Text=".Selecciona una opción..." Value="0"></asp:ListItem>
                                                        <asp:ListItem Text="Alimento" Value="1"></asp:ListItem>
                                                        <asp:ListItem Text="Producto" Value="2"></asp:ListItem>
                                                        <asp:ListItem Text="Marca" Value="3"></asp:ListItem>
                                                    </asp:DropDownList>
                                                    <asp:DropDownList ID="DropDownListSearchType2" runat="server" TabIndex="-1" CssClass="controls"
                                                        Visible="false" data-placeholder="Nivel" AutoPostBack="true" OnSelectedIndexChanged="DropDownListSearchType2_SelectedIndexChanged">
                                                    </asp:DropDownList>
                                                    <asp:DropDownList ID="DropDownListSearchType3" runat="server" TabIndex="-1" CssClass="controls"
                                                        Visible="false" data-placeholder="Nivel" AutoPostBack="true" OnSelectedIndexChanged="DropDownListSearchType3_SelectedIndexChanged">
                                                    </asp:DropDownList>
                                                    <asp:TextBox ID="TextBoxSearchByProduct" runat="server" Visible="false"></asp:TextBox>
                                                    <asp:Button ID="ButtonSearch" runat="server" Text="Buscar" CssClass="btn" Visible="false" />
                                                    <br />
                                                    <h5>
                                                        <asp:Label ID="LabelMessage" runat="server" Visible="false"></asp:Label></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="servic" id="divIngredients" runat="server" visible="false">
                                        <div class="row">
                                            <div class="span12">
                                                <!-- Service hero -->
                                                <div class="hero"  >
                                                </div>
                                                <!-- Service -->
                                                <!-- Service list. Note down the class name before editing. -->
                                                <div class="row">
                                                    <div class="span6">
                                                        <!-- Service 1. Class name - "serv-a" -->
                                                        <asp:Repeater ID="RepeaterIngredientList1" runat="server">
                                                            <ItemTemplate>
                                                                <div class='<%# Eval("servType") %>'>
                                                                    <div class="serv">
                                                                        <div class="simg">
                                                                            <!-- Font awesome icon. -->
                                                                            <i class='<%# Eval("iconType") %>'></i>
                                                                        </div>
                                                                        <!-- Service title -->
                                                                        <h4>
                                                                            <asp:Label ID="LabelListIngredientsHeader1" runat="server" Text='<%# Eval("IngredientTypeName") %>'></asp:Label></h4>
                                                                        <!-- Service para -->
                                                                        <div class="controls">
                                                                            <asp:CheckBoxList ID="CheckBoxListIngredients1" runat="server" CssClass="checkbox inline">
                                                                            </asp:CheckBoxList>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </ItemTemplate>
                                                        </asp:Repeater>
                                                        <div class="clearfix">
                                                        </div>
                                                    </div>
                                                    <div class="span6">
                                                        <!-- Service 3. Class name - "serv-a" -->
                                                        <asp:Repeater ID="RepeaterIngredientList2" runat="server">
                                                            <ItemTemplate>
                                                                <div class='<%# Eval("servType") %>'>
                                                                    <div class="serv">
                                                                        <div class="simg">
                                                                            <!-- Font awesome icon. -->
                                                                            <i class='<%# Eval("iconType") %>'></i>
                                                                        </div>
                                                                        <!-- Service title -->
                                                                        <h4>
                                                                            <asp:Label ID="LabelListIngredientsHeader2" runat="server" Text='<%# Eval("IngredientTypeName") %>'></asp:Label></h4>
                                                                        <!-- Service para -->
                                                                        <div class="controls">
                                                                            <asp:CheckBoxList ID="CheckBoxListIngredients2" runat="server" CssClass="checkbox inline">
                                                                            </asp:CheckBoxList>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </ItemTemplate>
                                                        </asp:Repeater>
                                                        <div class="clearfix">
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- Testimonial -->
                                                <hr />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="support" id="divDetails" runat="server" visible="false">
                                        <div class="hero">
                                        </div>
                                        <div class="row">
                                            <div class="span12">
                                                <!-- Support -->
                                                <div class="row">
                                                    <div class="span8">
                                                        <div class="support-page">
                                                            <h4>
                                                                Tu salud</h4>
                                                            <p>
                                                            <a style="color:Red">1. Esto es un ejemplo de la descripción del producto, desde el punto de vista verde y su justificación.</a><br />
                                                            <a style="color:Red">2. En la parte de abajo habrán articulos relacionados para soportar los resultados.</a>
                                                               </p>
                                                            <img src="img/test.png" /><br />
                                                            <div class="button">
                                                                <a href="#">Aañadir a la lista</a> </div>
                                                            <h5>
                                                                Articulos científicos:</h5>
                                                            <!-- Below line creates form -->
                                                            <div id="form">
                                                            </div>
                                                            <hr />
                                                            <div class="clearfix">
                                                            </div>
                                                            <!-- Lists -->
                                                            <ul id="slist">
                                                                <!-- List #1 -->
                                                                <li>
                                                                    <!-- Title -->
                                                                    <a href="#">Sed eu leo orci condimentum grvid metus</a>
                                                                    <!-- Para -->
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                                <!-- List #2 and so on.... -->
                                                                <li><a href="#">Fusce imperdiet risus eget viverr</a>
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                                <li><a href="#">Dimmi vestibulum libero ut vestibulum</a>
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                                <li><a href="#">Aeros a ante molestie gravida commodo</a>
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                                <li><a href="#">Integer porta erat ac eros porta</a>
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                                <li><a href="#">Molestie gravida commodo dui adipiscing</a>
                                                                    <p>
                                                                        Fusce imperdiet, risus eget viverra faucibus, diam mi vestibulum libero, ut vestibulum
                                                                        tellus magna nec enim. Nunc dapibus varius interdum. Phasellus at lorem ut lectus
                                                                        fermentum convallis. Sed diam nisi, pulvinar vitae molestie hendrerit, venenatis
                                                                        eget mauris. Integer porta erat ac eros porta ultrices. Proin porttitor eros a ante
                                                                        molestie gravida commodo dui adipiscing.</p>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="span4">
                                                        <!-- Contact box -->
                                                        <div class="scontact">
                                                            <!-- Title -->
                                                            <h4>
                                                                Productos Relacionados</h4>
                                                            <!-- Phone, email and address with font awesome icon -->
                                                            <p>
                                                               Esto es un slide de productos relacionados(Busqueda organica).</p>
                                                           
                                                            <!-- Button -->
                                                            <div class="button">
                                                                <a href="#">Aañadir a la lista</a> <a href="#">Calcular</a></div>
                                                        </div>
                                                    </div>
                                                   
                                                     <div class="span4" style="margin-top:20px;">
                                                        <!-- Contact box -->
                                                        <div class="scontact">
                                                            <!-- Title -->
                                                            <h4>
                                                                Productos Pautados</h4>
                                                            <!-- Phone, email and address with font awesome icon -->
                                                            <p>
                                                               Esto es un slide de productos pautados (campañas).</p>
                                                           
                                                            <!-- Button -->
                                                            <div class="button">
                                                                <a href="#">Aañadir a la lista</a> </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="hero" style="margin-top: 20px;">
                                        </div>
                                    </div>
                                </asp:Panel>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                </div>
            </div>
            <!-- FAQ ends -->
            <%--  <!-- CTA starts -->
            <div class="cta">
                <div class="row">
                    <div class="span9">
                        <!-- First line -->
                        <p class="cbig">
                            Lorem ipsum consectetur dolor sit amet, consectetur adipiscing.</p>
                        <!-- Second line -->
                        <p class="csmall">
                            Duis vulputate consectetur malesuada eros nec odio consect eturegestas et netus
                            et in dictum nisi vehicula.</p>
                    </div>
                    <div class="span2">
                        <!-- Button -->
                        <div class="button">
                            <a href="#">Calcular</a></div>
                    </div>
                </div>
            </div>
            <!-- CTA Ends -->--%>
            <div class="row">
                <asp:UpdatePanel ID="updatePanelCalculate" runat="server" EnableViewState="false"
                    UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Panel ID="panelCalculate" runat="server">
                            <div class="span3">
                                <div class="afeature">
                                    <div class="afmatter">
                                        <div class="button">
                                            <a href="#">
                                                <asp:Button ID="ButtonCalculate" runat="server" Text="Calcular" BackColor="Transparent"
                                                    BorderColor="Transparent" ForeColor="White" OnClick="ButtonCalculate_Click" />
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="afeature" runat="server" id="yourHealthCircle">
                                    <div id="g1">
                                    </div>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="afeature" runat="server" id="yourPlanetCircle">
                                    <div id="g2">
                                    </div>
                                </div>
                            </div>
                            <div class="span3">
                                <div class="afeature" runat="server" id="yourCommunityCircle">
                                    <div id="g3">
                                    </div>
                                </div>
                            </div>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
</asp:Content>
